<template>
  <Input :value="value.password" placeholder="请输入密码" type="password" v-if="isNewInput" @change="pwdChange">
    <template #suffix>
      <a @click="encrypt"><EyeInvisibleOutlined style="color: rgba(0, 0, 0, 0.45)" /></a>
    </template>
  </Input>
  <Input :value="value.password" placeholder="请输入密码" v-if="!isNewInput">
    <template #suffix>
      <a @click="decrypt"><EyeOutlined style="color: rgba(0, 0, 0, 0.45)" /></a> </template
  ></Input>
</template>
<script lang="ts" setup>
import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';
import { Form, Input } from 'ant-design-vue';
import { ref } from 'vue';

const props = defineProps(['value']);
const emit = defineEmits(['update:value']);
const formItemContext = Form.useInjectFormItemContext();
const triggerChange = (changedValue: { password: string }) => {
  emit('update:value', { ...props.value, ...changedValue });
  formItemContext.onFieldChange();
};
const isNewInput = ref(true);
const encrypt = () => {
  isNewInput.value = false;
};
const decrypt = () => {
  isNewInput.value = true;
};

const pwdChange = (e) => {
  const newPwd = e.target.value;
  triggerChange({ password: newPwd });
};
defineExpose({ encrypt, decrypt });
</script>
